<template>
  <a-modal v-model:open="open" title="分配医生" :maskClosable="false" :width="800">
    <div style="text-align: right; margin-bottom: 10px">
      <a-switch v-model:checked="checked" size="small" @change="changeDoctor" /> 按接诊医生分配
    </div>
    <a-table
      size="small"
      :pagination="false"
      rowKey="id"
      :columns="state.columns"
      :dataSource="state.tableData"
      :loading="state.tableLoading"
      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
      :scroll="{ y: '300px' }"
    ></a-table>
    <div>
      选择医生
      <a-select
        showSearch
        optionFilterProp="label"
        :value="state.doctor"
        placeholder="请选择"
        :disabled="checked"
        @change="handleDoctor"
        style="margin: 20px 0 0 10px; width: 200px"
        :getPopupContainer="(triggerNode) => triggerNode.parentNode"
      >
        <a-select-option
          v-for="(item, index) in state.doctorList"
          :key="index"
          :value="item.id"
          :label="item.realName"
          >{{ item.realName }}</a-select-option
        >
      </a-select>
    </div>
    <template #footer>
      <a-button @click="open = false">取消</a-button>
      <a-button @click="handleOk" type="primary" :loading="state.btnLoading">确定</a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { getUnsetList, getUserList, batchSet } from '@/api/patientManagement/index.ts'
import { message } from 'ant-design-vue'
import store from '@/store'

const emit = defineEmits(['close'])
type Key = string | number
const open = ref(false)
const checked = ref(false)

const state = reactive({
  columns: [
    {
      key: 'patName',
      dataIndex: 'patName',
      align: 'left',
      title: '姓名'
    },
    {
      key: 'age',
      dataIndex: 'age',
      align: 'left',
      title: '年龄'
    },
    {
      key: 'visitTime',
      dataIndex: 'visitTime',
      align: 'left',
      title: '就诊时间'
    },
    {
      key: 'doctorName',
      dataIndex: 'doctorName',
      align: 'left',
      title: '接诊医生'
    }
  ],
  tableData: [],
  selectedRowKeys: [],
  doctorList: [],
  doctor: '',
  doctorName: '',
  tableLoading: true,
  btnLoading: false
})

const doctorId = ref('')
const doctorName = ref('')

const init = (groupId) => {
  state.btnLoading = false
  state.selectedRowKeys = []
  state.doctorName = ''
  state.doctor = ''
  state.tableLoading = true
  open.value = true
  state.tableData = []

  getUserData()

  getData(groupId)
}

const getUserData = () => {
  state.doctorList = []
  getUserList().then((res) => {
    state.doctorList = res.data

    if (res.data) {
      state.doctor = res.data[0].id
      state.doctorName = res.data[0].realName
      doctorId.value = state.doctor
      doctorName.value = state.doctorName
    }
  })
}

const getData = (id) => {
  getUnsetList({ groupId: id }).then((res) => {
    state.tableLoading = false
    if (res.data) {
      state.tableData = res.data
    }
  })
}

const onSelectChange = (selectedRowKeys: Key[]) => {
  state.selectedRowKeys = selectedRowKeys
}

const changeDoctor = (value) => {
  checked.value = value

  if (!value) {
    doctorId.value = state.doctor
    doctorName.value = state.doctorName
  }
  //   doctorId.value = value ? store.userApp.userInfo.id : state.doctor
  //   doctorName.value = value ? store.userApp.userInfo.realName : state.doctorName
}

const handleDoctor = (value) => {
  //   console.log(value)
  state.doctor = value
  const data = state.doctorList.filter((ele) => value == ele.id)[0]
  state.doctorName = data.realName
  //   console.log(data)
  doctorId.value = value
  doctorName.value = data.realName
}

const handleOk = () => {
  if (!state.selectedRowKeys.length) {
    message.warning('请选择需要分配的患者')
    return
  }

  let selectData = []
  state.selectedRowKeys.forEach((item) => {
    const data = state.tableData.filter((ele) => ele.id == item)
    selectData = [...selectData, ...data]
  })

  if (checked.value) {
    selectData.forEach((elem) => {
      elem.userId = elem.doctorCode
      elem.userName = elem.doctorName
    })
  } else {
    selectData.forEach((elem) => {
      elem.userId = doctorId.value
      elem.userName = doctorName.value
    })
  }
  //   console.log(selectData)
  state.btnLoading = true

  batchSet(selectData)
    .then(() => {
      message.success('患者分配成功')
      open.value = false
      state.btnLoading = false
      emit('close')
    })
    .catch(() => {
      state.btnLoading = false
    })
}

defineExpose({
  init
})
</script>
<style lang="less" scoped></style>
